
{% include "basehead.html" %}

<style>
    .emoji{
        width:20px;
    }   
    .deldate{
        background-color:#74BDE2;
    }
    .list-group-item{
        background-color:rgb(187, 187, 187);
        border-bottom-color:#FFF1DE;
    }
    label{
        font-size:18px;padding-left:30px;
        padding-left:30px;
    }
</style>


<title>还愿</title>
    <body>
        <div name="container" class="container" style="margin-top:5%;background-color:#1d1d1d" >
            <div class="page-header" id='pageheader' style='text-align:center;'>
               <div style="margin:0 7.6%">
                <h1 style="color:white"><a href="/" title="许 愿 墙" style="color:rgb(187, 187, 187);">许 愿 墙</a></h1> 
                <p>
                     <a href="/add/" id="add" type="button" class = "btn btn-lg btn-success">
                         <!--许下愿望-->
                     </a>
                     <a href="/del/" id="del" type="button" class = "btn btn-lg btn-danger">
                         <!--删除愿望-->
                     </a>
                     <a href="/info/" id="info" type="button" class = "btn btn-lg btn-primary">
                         <!--许下愿望-->
                     </a>
                     </p>
               </div>
            </div>
          <div class="form-horizontal col-sm-11"><br />
            <form action="/del/" method="post" >
            {% csrf_token %}
                <div class="form-group">
                    <label class="col-sm-3 control-label label-text">愿望ID:</label>
                    <div class="col-sm-7">
                        <input class="form-control" maxlength="254" name="wishingid" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label label-text">删除咒语:</label>
                    <div class="col-sm-7">
                        <input class="form-control" maxlength="32" name="password" type="password">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label label-text"></label>
                    <div class="col-sm-7">
                        <button type="submit" class="btn btn-block btn-danger">删除愿望</button>
                        {% if del%}
                        <del>删除成功</del>  <!--我只是来占位置的-->
                        {% endif%}
                    </div>
                </div>
            </form>
          </div>
          <hr id="myhr"></hr>
          <div style="margin:0 8% 0 8% ">
           <ul class="list-group">
              {% load emoji_tags %}
              {% for wishing in wishings %}
                <li class="list-group-item ">
                    <span class="badge deldate">{{wishing.date}} </span>
                    <div>ID {{wishing.id}} : {{wishing.text|emoji_replace_unicode}} </div>
               </li>
              {% endfor %}
           </ul>
           <!--<p>123333333333 占位置</p>-->
          </div>
          
        {% include "baseend.html" %}
        </div>
        
        <script>
            $("#myhr").css("width",$("#pageheader").css("width"))
            $("#myhr").css("border-top-color",$("#container").css("background-color"))
            $(window).resize(function() {
                $("#myhr").css("width",$("#pageheader").css("width"))
            });
        </script>
        
    </body>
</html>